<template>
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <el-input
        class="!w-[160px] mr-2"
        v-model="form.order_no"
        placeholder="头程单号"
      ></el-input>
      <SelectWarehouse
        v-model="form.to_warehouse_id"
        placeholder="目的仓"
        class="!w-[160px] mr-2"
        multiple
      ></SelectWarehouse>
      <SelectWarehouse
        v-model="form.send_warehouse_id"
        placeholder="发货仓"
        class="!w-[160px] mr-2"
        multiple
      ></SelectWarehouse>
      <el-select class="!w-[160px] mr-2" v-model="form.status" placeholder="状态">
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <VGroup>
        <el-select class="selectClass !w-[100px]" v-model="form.dateRange.type">
          <el-option
            v-for="item in dateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-model="form.dateRange.value"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="max-width: 300px"
          :default-time="defaultTime()"
        />
      </VGroup>
    </template>
  </VTable>
</template>
<script lang="jsx" setup>
import { getWaitShipOrderList } from "../api.js";
import SelectWarehouse from "@/components/SelectWarehouse";
import { dateOptions, statusOptions } from "../data.js";

const props = defineProps({
  formData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { formData } = toRefs(props);

const tableOptins = reactive({
  height: 500,
  rowConfig: {
    height: 80,
  },
  scrollHideForm: false,
  formConfig: {
    data: {
      order_type: 1,
      dateRange: { type: "shipment_time", value: "", range: true },
    },
  },
  columns: [
    {
      title: "头程单号",
      field: "order_no",
      width: "160",
    },
    {
      title: "渠道SKU",
      field: "to_seller_sku",
      width: "120",
    },
    {
      title: "物流信息",
      field: "supplier_name",
      minWidth: "220",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>发货仓:{row.send_warehouse}</div>
              <div>运输方式:{row.transport_type_desc}</div>
              <div>跟踪号:{row.tracking_number}</div>
            </div>
          );
        },
      },
    },
    {
      title: "目的仓",
      field: "to_warehouse_name",
      minWidth: "160",
    },
    {
      title: "总运费",
      field: "freight_fee",
      minWidth: "100",
    },
    {
      title: "加权运费",
      field: "weighted_freight_fee",
      minWidth: "100",
    },
    {
      title: "加权采购成本",
      field: "purchase_cost",
      minWidth: "110",
    },
    {
      title: "发货数量/发货时间",
      field: "shipped_quantity",
      width: "100",
      slots: {
        header: ({ row }) => {
          return (
            <div>
              <div>发货数量</div>
              <div>发货时间</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div>
              <div>{row.shipped_quantity}</div>
              <div>{row.shipment_time}</div>
            </div>
          );
        },
      },
    },
    {
      title: "在途数量/预计到货时间",
      field: "transit_num",
      width: "120",
      slots: {
        header: ({ row }) => {
          return (
            <div>
              <div>在途数量</div>
              <div>预计到货时间</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div>
              <div>{row.transit_num}</div>
              <div>{row.plan_arrival_time}</div>
            </div>
          );
        },
      },
    },
    {
      title: "收货数量/收货时间",
      field: "received_quantity",
      width: "100",
      slots: {
        header: ({ row }) => {
          return (
            <div>
              <div>收货数量</div>
              <div>收货时间</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div>
              <div>{row.received_quantity}</div>
              <div>{row.received_time}</div>
            </div>
          );
        },
      },
    },
    {
      title: "头程周期",
      field: "tracking_price",
      width: "100",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <div>备货:{row.stock_in_days}</div>
              <div>运输:{row.transport_days}</div>
              <div>总天数:{Number(row.stock_in_days) + Number(row.transport_days)}</div>
            </div>
          );
        },
      },
    },
    {
      title: "状态",
      field: "status_desc",
      width: "100",
    },
    {
      title: "单据备注",
      field: "order_remark",
      width: "100",
    },
  ],
  pagerConfig: {
    pageNum: 1,
    pageSize: 10,
  },
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: async ({ page, form }) => {
        let param = {
          ...form,
          sku: formData.value.sku,
          ...page,
        };
        const res = await getWaitShipOrderList(param);
        return res;
      },
    },
  },
});
</script>
